<template>
  <view class="container">
  
	<view class="px-16">
		<view v-for="(item, index) in exhibitionList" :key="index" class="exhibition-card" @click="toDetail(item)">
		  
		  <view class="flex radius-8 m-tb-16">
			  <view class="">
				  <image :src="item.image" mode="aspectFill" class="w-100 radius-8 h-120" style="vertical-align:bottom"></image>
			  </view>
			  <view>
				  <view class="content-wrapper">
				    <view class="header">
				      <text class="title">{{ item.title }}</text>
				    </view>
				    <view class="description" v-html="item.description"></view>
					<text class="date flex-x-end">{{ formatDate(item.date) }}</text>
				  </view>
			  </view>
		  </view>
		
		</view>
	</view>
  
  </view>
</template>

<script>
export default {
  data() {
    return {
	  searchValue:'',
      exhibitionList: [
        {
          title: "开放信息",
          description: "票务说明</br>开放时间为9:00——17:00，16:00停止入馆。</br>每周一例行闭馆，如遇国家法定节假日正常开放，预约时间以公告开放时间为准。</br>所有观众必须提前于“四川博物院”微信公众号进行线上预约，并须携带有效证件（身份证、护照等）以备核验，未成年人请用户口簿上的身份证进行预约，一人一码，扫码入馆。</br>未成年团队参观请提前拨打咨询电话，了解入园（馆）要求，并至四川博物院官网查阅“关于防疫期间未成年人团队预约参观的通知”按提示完成预约。</br>14周岁以下的未成年人需由成年人陪伴入馆参观。一名成年人最多可携带2名14岁以下未成年人入馆参观。（团队预约除外）</br>成人团队暂不接受预约参观，均以散客标准入园（馆）。</br>观众须在预约时间段内准时入馆，若不能按预约日期参观，请及时取消预约。</br>疫情期间，游客实名预约后，在入口处接受体温检测、健康码查验及安检，刷预约码入馆。必要时需核验近期核酸检测报告。游客排队及参观时须全程佩戴口罩，并与他人保持1米以上的安全社交距离。</br>疫情期间未佩戴口罩者、防疫健康码显示黄码、红码者，体温高于37.2°C或身体出现不适状况，将谢绝入园（馆）参观。</br>穿拖鞋、衣冠不整、携带宠物者谢绝入馆。</br>其他特殊情况，请提前电话咨询，以便正常入园（馆）。</br>如实时在馆游客超过3000人,将实行“出一进一”动态管理。疫情期间将根据防控情况对人流限制作动态调整。咨询电话：028——65521888 </br>028——65521569</br>馆 址：杭州市5号</br>参观须</br>为确保文物安全，营造良好的参观环境，四川博物院要求观众自觉遵守如下规定：</br>衣冠不整者谢绝入馆；</br>携带宠物者谢绝入馆；</br>身高1.2米以下儿童需由家长带领参观，行动不便老年人需由亲友陪同参观；</br>观众携带的大件包、袋可免费寄存；</br>请勿将食品饮料带入陈列室；</br>展厅内严禁吸烟；</br>保持环境清洁，请勿乱丢垃圾；</br>观众参观时，应听从工作人员管理，请勿大声喧哗，文明参观。",
          date: "2025-01-23",
          image: "http://st9hxhc9t.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250320164655.jpg" // 假设图片路径
        },
        {
          title: "大明宫瓷——十五世纪的明...",
          description: "明朝取代蒙元立国后，致力于'复先王之旧'，参议唐与两宋制度，复兴华夏礼乐衣冠，但祭礼皆用瓷器...",
          date: "2022-03-23",
          image: "http://st9hxhc9t.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250320164649.jpg"
        },
        {
          title: "丝路搬珍-铜胎掐丝法琅艺术展",
          description: "泱泱五千年中华文明创造了无数艺术瑰宝，景泰蓝尤为夺目。虽仅有六百余年历史，但景泰蓝却因集美术、工艺...",
          date: "2022-03-23",
          image: "http://st9hxhc9t.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250320164644.jpg"
        },
        {
          title: "交流互鉴——敦煌石窟与河...",
          description: "丝绸之路是古代联通东西方文明的大通道，也是东西方政治、经济与文化艺术往来交流的纽带。敦煌是陆上丝绸之...",
          date: "2022-03-23",
          image: "http://st9hxhc9t.hd-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250320164628.jpg"
        }
      ]
    };
  },
  methods: {
    formatDate(dateString) {
      // 简单日期格式化示例
      return dateString.replace(/-/g, ".");
    },
	search(res) {
		uni.showToast({
			title: '搜索：' + res.value,
			icon: 'none'
		})
	},
	input(res) {
		console.log('----input:', res)
	},
	clear(res) {
		uni.showToast({
			title: 'clear事件，清除值为：' + res.value,
			icon: 'none'
		})
	},
	cancel(res) {
		uni.showToast({
			title: '点击取消，输入值为：' + res.value,
			icon: 'none'
		})
	},
	toDetail(item){
		
		uni.navigateTo({
			url:'/pages/indexOther/showDetailInfo?item'+JSON.stringify(item)
		})
	},
  }
};
</script>

<style scoped>
.container {

  /* background-color: #f5f5f5; */
}

.exhibition-card {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.exhibition-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx 12rpx 0 0;
}

.content-wrapper {
  padding: 24rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
}

.date {
  font-size: 24rpx;
  color: #999;
}

.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>